'use client'

// 如果你遇到找不到模块“react”或其相应类型声明的问题，可能是因为你没有安装react或其类型定义文件。
// 你可以通过以下命令安装react和它的类型定义文件：
// npm install react react-dom
// npm install --save-dev @types/react @types/react-dom
import React,{ useEffect, useRef } from 'react'

declare global {
  interface Window {
    AMap: any
  }
}

export default function Map() {
  const chatRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 确保在客户端加载高德地图脚本
    const script = document.createElement('script')
    script.src = `https://webapi.amap.com/maps?v=2.0&key=${process.env.NEXT_PUBLIC_AMAP_KEY}`
    script.async = true
    script.onload = () => {
      if (chatRef.current) {
        const map = new window.AMap.Map(chatRef.current, {
          zoom: 11,
          center: [116.397428, 39.90923], // 北京天安门坐标
        })
      }
    }
    document.head.appendChild(script)

    return () => {
      document.head.removeChild(script)
    }
  }, [])

  return (
    <div
      ref={chatRef}
      style={{
        width: '100%',
        height: '100%',
      }}
    />
  )
}
